<template>
  <Card class="!m-10px" :bodyStyle="{ padding: 0 }">
    <div class="flex justify-between border-b px-20px">
      <Tabs v-model:activeKey="activeKey" :tabBarStyle="{ margin: 0 }">
        <TabPane key="saled" tab="销售量" />
        <TabPane key="visited" tab="访问量" />
      </Tabs>
      <div class="flex items-center">
        <Button :class="{ '!text-blue-500': active === 'day' }" type="text" @click="setToday">
          今日
        </Button>
        <Button :class="{ '!text-blue-500': active === 'week' }" type="text" @click="setWeek">
          本周
        </Button>
        <Button :class="{ '!text-blue-500': active === 'month' }" type="text" @click="setMonth">
          本月
        </Button>
        <Button :class="{ '!text-blue-500': active === 'year' }" type="text" @click="setYear">
          本年
        </Button>
        <RangePicker v-model:value="date" />
      </div>
    </div>
    <Row>
      <Col :xs="24" :md="18">
        <div class="h-300px">
          <WorkbenchChart
            :option="{
              title: {
                text: '销售量趋势',
                top: 15,
                left: 20,
              },
              xAxis: {
                data: [
                  '一月',
                  '二月',
                  '三月',
                  '四月',
                  '五月',
                  '六月',
                  '七月',
                  '八月',
                  '九月',
                  '十月',
                  '十一月',
                  '十二月',
                ],
              },
              yAxis: {},
              series: {
                type: 'bar',
                data: [20, 33, 11, 24, 20, 31, 14, 24, 20, 32, 12, 24],
                barWidth: 30,
                name: '销售量',
              },
              grid: {
                left: 20,
                right: 20,
                top: 60,
                bottom: 20,
                containLabel: true,
              },
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'line',
                  lineStyle: {
                    width: 50,
                    color: 'rgba(0, 0, 0, 0.1)',
                  },
                },
              },
            }"
          />
        </div>
      </Col>
      <Col :xs="24" :md="6">xxx</Col>
    </Row>
  </Card>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';

  export default defineComponent({
    name: 'SecondFloor',
  });
</script>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { Card, Tabs, TabPane, Button, RangePicker, Row, Col } from 'ant-design-vue';
  import type { Dayjs } from 'dayjs';
  import dayjs from 'dayjs';
  import WorkbenchChart from '../WorkbenchChart.vue';
  // saled visited
  const activeKey = ref<string>('saled');
  const date = ref<[Dayjs, Dayjs]>([dayjs(), dayjs()]);
  const active = ref<string>('day');

  const setToday = () => {
    date.value = [dayjs(), dayjs()];
    active.value = 'day';
  };
  const setWeek = () => {
    date.value = [dayjs().startOf('week').add(1, 'day'), dayjs().endOf('week').add(1, 'day')];
    active.value = 'week';
  };
  const setMonth = () => {
    date.value = [dayjs().startOf('month'), dayjs().endOf('month')];
    active.value = 'month';
  };
  const setYear = () => {
    date.value = [dayjs().startOf('year'), dayjs().endOf('year')];
    active.value = 'year';
  };

  // const test = () => {
  //   const [start, end] = date.value;
  //   console.log(start.format('YYYY-MM-DD'));
  //   console.log(end.format('YYYY-MM-DD'));
  // };
</script>
